import { install } from "element-plus";
import { useIntersectionObserver } from "@vueuse/core";

// 定义懒加载插件
export const lazyPlugin = {
  install(app) {
    // 懒加载指令逻辑
    // 定义全局指令
    // directive 就是“给元素加超能力”的语法糖，Vue 提供了 v-if、v-model 等内置指令，你也可以像现在这样写自己的，来实现你想要的行为。
    app.directive("img-lazy", {
      mounted(el, binding) {
        // el 是绑定这个指令的那个元素，比如 <img>
        // binding.value 就是 v-img-lazy="xxx" 里面的 xxx
        // console.log(el, binding);
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          console.log(isIntersecting);
          if (isIntersecting) {
            // 进入视口区域
            el.src = binding.value; // 给图片的src赋值
            stop();
          }
        });
      },
    });
  },
};
